<template>
  <el-dialog
    v-el-drag-dialog
    class="web-catch-dialog"
    :title="$t('网页截图')"
    :visible="visible"
    width="700px"
    @update:visible="updateVisible"
    :close-on-click-modal="false">
    <div class="getWeb-row">
      <span class="label">请输入网址</span>
      <el-input class="input" v-model="webUrl" @blur="webUrlBlur" clearable>
        <el-button @click="prefixToggle" slot="prepend">
          {{ prefixArr[prefixIndex] }}
        </el-button>
      </el-input>
      <el-button :disabled="!webUrl" class="btn" @click="openWeb" type="primary" size="small">{{ $t('获取网页') }}</el-button>
    </div>
    <div class="action-row">
      <el-button @click="actionClick('start')" :disabled="!imgUrl" plain type="primary" size="small">{{ $t('开始截图') }}</el-button>
      <el-button @click="actionClick('ok')" :disabled="!showCapture" plain type="primary" size="small">{{ $t('确定截图') }}</el-button>
      <el-button @click="actionClick('cancel')" :disabled="!isClip" plain type="primary" size="small">{{ $t('取消截图') }}</el-button>
      <el-button @click="actionClick('save')" :disabled="!isClip" plain type="primary" size="small">{{ $t('保存图片') }}</el-button>
    </div>
    <div ref="web" class="web-area">
      <template v-if="imgUrl">
        <img v-show="!isClip" ref="simg" :src="imgUrl" @load="imgLoaded" />
        <vue-draggable-resizable
          v-show="!isClip && showCapture"
          :x="webInfo.x"
          :y="webInfo.y"
          :w="webInfo.w"
          :h="webInfo.h"
          :parent="false"
          @resizestop="onResizestop"
          @dragstop="onDragstop">
        </vue-draggable-resizable>
        <img v-show="isClip" class="clip" :src="imgUrl" :style="clipStyles" />
      </template>
    </div>
  </el-dialog>
</template>

<script>
import MediaApi from '@/api/media.js'

export default {
  components: {
    
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prefixIndex: 0,
      prefixArr: ['http://', 'https://'],
      isClip: false,
      showCapture: false,
      webUrl: '',
      imgUrl: '',
      webAreaW: 0,
      webAreaH: 0,
      webInfo: {
        x: 0,
        y: 0,
        w: 100,
        h: 100
      },
      
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        this.webUrl = ''
        this.imgUrl = ''
        this.isClip = false
        this.showCapture = false
        this.webInfo = {
          x: 0,
          y: 0,
          w: 100,
          h: 100
        }
      }
    }
  },
  computed: {
    clipStyles() {
      const {x, y, w, h} = this.webInfo
      if (!this.webAreaW || !this.webAreaH || !w || !h) return {}

      return {
        clip: `rect(${y}px, ${x + w}px, ${y + h}px, ${x}px)`
      }
    }
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    webUrlBlur() {
      const v = this.webUrl
      if (/^https:\/\//.test(v)) {
        this.webUrl = v.slice(8)
        this.$nextTick(() => {
          this.prefixIndex = 1
        })
      } else if (/^http:\/\//.test(v)) {
        this.webUrl = v.slice(7)
        this.$nextTick(() => {
          this.prefixIndex = 0
        })
      } else {
        this.$nextTick(() => {
          this.prefixIndex = 0
        })
      }
    },
    prefixToggle() {
      this.prefixIndex = this.prefixIndex ^ 1
    },
    async openWeb() {

      const res = await MediaApi.getWebImg({webUrl: `${this.prefixArr[this.prefixIndex]}${this.webUrl}`})
      console.log(res)
      this.imgUrl = res.path
      // 等待后端返回页面图片
      // setTimeout(() => {
      //   this.imgUrl = 'https://jcdn.xhby.net/JHD/publish/20200526/1590495723132004639.jpg'
      // }, 1500)
    },
    actionClick(action) {
      let picInfo
      switch (action) {
        case 'start':
          this.showCapture = true
          break;
        case 'ok': 
          this.isClip = true
          break;
        case 'cancel':
          this.isClip = false
          break;
        case 'save':
          picInfo = {
            spaceX: this.webInfo.x,
            spaceY: this.webInfo.y,
            width: this.webInfo.w,
            height: this.webInfo.h,
            url: this.webUrl
          }
          this.$emit('ok', picInfo)
          break;
        default: 
      }
    },
    imgLoaded(e) {
      const img = e.path[0]
      this.webAreaW = img.clientWidth
      this.webAreaH = img.clientHeight
    },
    onResizestop(x, y, w, h) {
      this.webInfo = {
        x,
        y,
        w,
        h
      }
    },
    onDragstop(x, y) {
      this.webInfo.x = x
      this.webInfo.y = y
    }
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

$margin-b: 20px;
@mixin flex-row() {
  display: flex;
  align-items: center;
  margin-bottom: $margin-b;
}

.web-catch-dialog {
  ::v-deep .el-dialog {
    padding-bottom: 45px;
  }
  ::v-deep .el-dialog__body {
    padding-top: 19px !important;
  }
  ::v-deep .el-button--primary.is-plain {
    background: #fff;
    color: $defaultBlue;
    border-color: $defaultBlue;
  }
  ::v-deep .el-button--primary.is-plain.is-disabled {
    color: $defaultBlue;
    border-color: $defaultBlue;
    opacity:0.5;
  }
}
.getWeb-row {
  @include flex-row();
  .label {
    min-width: 70px;
    margin-right: 14px;
  }
  .input {
    flex: 1;
    max-width: calc(100% - 221px);
    ::v-deep .el-input-group__prepend {
      padding-top: 4px;
      font-size: 12px;
    }
  }
  .btn {
    width: 120px;
    height: 36px;
    margin-left: 17px;
  }
  margin-bottom: 15px;
}
.action-row {
  @include flex-row();
  .el-button {
    width: 120px;
    height: 36px;
  }
  .el-button + .el-button {
    margin-left: 15px;
  }
}
.web-area {
  width: 660px;
  height: 380px;
  border: 1px solid $bg-dc;
  overflow: auto;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  // background: #ccc;
  img {
    pointer-events: none;
    position: absolute;
  }
}
</style>